<template>
  <div class="tabtitle">
    <div class="tabtitle_item " :class="tabindex == id ? 'active' : ''" v-for="(it, id) in tabtitleary" :key="id"
      @click="tab(it, id)">{{ it.title }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabtitleary: [
        { title: "首页", path: "" },
        { title: "导购机", path: "" },
        { title: "小程序", path: "" },
        { title: "载播", path: "" },
        { title: "超级管理员", path: "" },
        { title: "退出登录", path: "" }
      ],
      tabindex: 0
    }
  },
  mounted() {

  },
  computed: {

  },
  methods: {
    tab(val, id) {
      this.tabindex = id
      if (id != 5) {
        this.$emit('tabtitle', id)
      } else {
        this.$confirm('此操作将退出管理平台, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/")
          sessionStorage.clear();
          localStorage.clear();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
        return
      }
      // console.log(val,"切换数据")
    }
  },
}
</script>
<style  lang="less"  scoped>
.active {
  background: #fff;
  color: #314790;
}

.tabtitle {
  height: 60px;
  line-height: 60px;
  color: #ccc;

  .tabtitle_item {
    cursor: pointer;
    float: left;
    padding: 0 15px;
    height: 100%;
  }
}
</style>
